<script setup>
import api from '../api/userApi.js'
import  {ref,computed,onMounted} from "vue"
import { ElMessage, ElMessageBox } from 'element-plus'
import lodash from 'lodash'

//定义绑定的数据
  //表格中的数据
const tableData=ref({});

const total=ref(0);
const editWinVisible=ref( false);
const addWinVisible=ref( false);
  //查询数据
  const searchObj=ref({
    current:1,
    limit:5,
    count: 0,
    username:'',
    password:'',
    realName:'',
    idCard:'',
    sex:'',
    phone:'',
    isdel:''
  });

//要修改或者新增的数据
const obj=ref({});
//查询数据
const search1=async () => {
  tableData.value = await api.page(searchObj.value);
  total.value = tableData.value.count;
};
//页面加载后要挂载的数据
onMounted(async()=>{
  await search1();
})





//定义方法
const search = ref('')
const filterTableData = computed(() =>
    tableData.value.data?.filter(
        (data) =>
            !search.value ||
            data.username.toLowerCase().includes(search.value.toLowerCase())
    ) || []
)
//前一页
const handleSizeChange=() => {
  search1();
}
//后一页
const handleCurrentChange=(val) => {
  search1();
}
//查询
const handleSearch=async () => {
  searchObj.value.current = 1;
  search1();
}




//新增
const handleAdd=() => {
  // obj.value = {
  //   username: '',
  //   password: '',
  //   realName: '',
  //   idCard: '',
  //   sex: '',
  //   phone: ''
  // };
  obj.value = {}
  addWinVisible.value = true;
}
//取消新增操作
const addCancel = () => {
  obj.value = {};
  addWinVisible.value = false;//关闭对话框
}
//新增提交
const addCommit = async () => {
  await api.add(obj.value);
  searchObj.value.current = 1;
  search1();
  addWinVisible.value = false;//关闭对话框
}
//---------------------------------------------------------------------------
//编辑修改
const handleEdit = (index, row) => {
  console.log(index, row)
  obj.value=lodash.clone(row);
  editWinVisible.value=true;
}

//取消修改操作
const editCancel = () => {
  obj.value = {};//清空数据
  editWinVisible.value = false;//关闭对话框
}
//修改提交
const editCommit = async () => {
  await api.edit(obj.value);
  search1();
  editWinVisible.value = false;//关闭对话框
}


//删除
const handleDelete = (index, row) => {
  console.log(index, row)
  ElMessageBox.confirm(
       '确认删除该行数据吗？',
      '删除提示',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        await api.del(row.id);
        //重新加载数据
        searchObj.value.current = 1;
        await search1();
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
}


</script>


<template>
<!--搜索框-->
  <el-form :inline="true" :model="searchObj" class="demo-form-inline" style="margin-top: 10px">
    <el-form-item label="手机号">
      <el-input v-model="searchObj.phone" placeholder="请输入手机号" clearable />
    </el-form-item>
    <el-form-item label="用户名">
      <el-input v-model="searchObj.username" placeholder="请输入姓名" clearable />
    </el-form-item>

    <el-form :inline="true">
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleAdd">新增</el-button>
      </el-form-item>
    </el-form>


  </el-form>


<!--  页面的内容-->
  <el-table :data="filterTableData" style="width: 100%">
    <el-table-column label="用户名" prop="username" />
    <el-table-column label="真实姓名" prop="realName" />
    <el-table-column label="身份证" prop="idCard" />
    <el-table-column label="性别" prop="sex" />
    <el-table-column label="电话" prop="phone" />
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template>
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
        >
          删除
        </el-button>

      </template>
    </el-table-column>
  </el-table>

<!--分页-->
  <el-pagination
      v-model:current-page="searchObj.current"
      v-model:page-size="searchObj.limit"
      :page-sizes="[1, 2, 3, 4]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />



<!--编辑对话框表单-->
  <el-dialog v-model="editWinVisible" title="编辑" width="500">
    <el-form :model="obj">
      <el-form-item label="用户姓名" :label-width="100">
        <el-input v-model="obj.username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" :label-width="100">
        <el-input v-model="obj.password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="真实姓名" :label-width="100">
        <el-input v-model="obj.realName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="身份证" :label-width="100">
        <el-input v-model="obj.idCard" autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别" :label-width="100">
        <el-select v-model="obj.sex" placeholder="未知">
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </el-form-item>
      <el-form-item label="手机号" :label-width="100">
        <el-input v-model="obj.phone" autocomplete="off" />
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editCancel">取消</el-button>
        <el-button type="primary" @click="editCommit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>

<!--新增对话框-->
  <el-dialog v-model="addWinVisible" title="新增" width="500">
    <el-form :model="obj">
      <el-form-item label="用户姓名" :label-width="100">
        <el-input v-model="obj.username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" :label-width="100">
        <el-input v-model="obj.password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="真实姓名" :label-width="100">
        <el-input v-model="obj.realName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="身份证" :label-width="100">
        <el-input v-model="obj.idCard" autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别" :label-width="100">
        <el-select v-model="obj.sex" placeholder="未知">
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </el-form-item>
      <el-form-item label="手机号" :label-width="100">
        <el-input v-model="obj.phone" autocomplete="off" />
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addCancel">取消</el-button>
        <el-button type="primary" @click="addCommit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>






</template>
<style scoped></style>